<!--
 * @Author: Wangtao
 * @Date: 2020-09-21 09:55:09
 * @LastEditors: Wangtao
 * @LastEditTime: 2020-10-17 18:20:03
-->
<template>
  <div class="number-config">
    <tabs
      :tabPane="tabPaneList"
      v-model="activeName"
      @tab-click="handleClick"
      :oprateArr="handleOprateArr"
      @actionClick="actionClick"
    ></tabs>
    <component
      :is="activeName"
      :ref="activeName"
      @handle-oprate="handleOprate"
    ></component>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import tabs from '@/components/configCommon/configTabs.vue'
import serviceNumber from './service/index.vue'
import sipNumber from './sip/index.vue'
import explicitNumber from './explicit/index.vue'
import transferNumber from './transfer/index.vue'
import { isHasFuncOrMenus } from '@/utils/common'
@Component({
  name: 'NumberManage',
  components: { tabs, serviceNumber, sipNumber, explicitNumber, transferNumber }
})
export default class NumberManage extends Vue {
  [x: string]: any
  private activeName = 'serviceNumber'
  private handleOprateArr = []
  private tabPaneList = [
    {
      label: '服务号',
      name: 'serviceNumber',
      _id: 'server_number'
    },
    {
      label: '外显号',
      name: 'explicitNumber',
      _id: 'display_number'
    },
    {
      label: 'SIP号',
      name: 'sipNumber',
      _id: 'sip_number'
    },
    {
      label: '呼转号',
      name: 'transferNumber',
      _id: 'call_agent_number'
    }
  ]

  private handleClick (item) {
    this.$set(this, 'handleOprateArr', [])
  }

  private actionClick (action, data) {
    this.$refs[this.activeName][action](data)
  }

  private handleOprate (list) {
    this.$set(this, 'handleOprateArr', list)
  }

  private beforeMount () {
    const arr = ['server_number', 'display_number', 'sip_number', 'call_agent_number'] //  服务号， 外显号，SIP号，呼转号
    const newArr: any[] = []
    arr.forEach((item: string) => {
      if (isHasFuncOrMenus(item, this.$store.state.common.session.user, true)) {
        newArr.push(item)
      }
    })
    this.tabPaneList = this.tabPaneList.filter(item => newArr.indexOf(item._id) > -1)
    this.activeName = this.tabPaneList[0] ? this.tabPaneList[0].name : 'serviceNumber'
  }
}
</script>

<style lang="stylus" scoped>
.number-config
  height 100%
  position relative
</style>
